<template>
  <el-dialog
             center
             :visible.sync="innerVisible"
             width="910px"
  >
    <div class="fa-modal-search">
      <el-input placeholder="请输入内容" v-model="name" v-if="activeName2 === 'first'">
        <el-button slot="append" icon="el-icon-search" @click="httpGetTable"></el-button>
      </el-input>
    </div>
    <el-tabs v-model="activeName2" type="card">
      <el-tab-pane label="商品图库" name="first">
        <div class="fa-product">
          <div class="product-left">
            <div class="product-name-list name-list-active"
                 v-for="(item, index) in goodsBig"
                 @click="checkMid($event, item)" :key="index">
              <span :title="item.name + '('+ item.countNum + ')'">{{item.name}}({{item.countNum}})</span>
            </div>
          </div>
          <div class="product-right">
            <p class="product-notes" v-if="editPicture">注：添加商品图片只能选择一张</p>
            <p class="product-notes" v-if="!editPicture">注：添加商品可点击进行多选</p>
            <div class="product-img-box" v-for="(item,index) in goodsMid" :key="index" :title="item.pictureName">
              <div class="product-img">
                <imgViewer :imgArr="item.picture"></imgViewer>
              </div>
              <i class="iconfont icon-xuanzhong "
                 :class="{'blue-color': item.checkImg}"
                 @click="checkImgFun(item)"
              >
              </i>
              <div class="item-total-picture">{{item.picture.length}}图</div>
              <div class="product-img-name">{{item.pictureName}}</div>
            </div>
          </div>
        </div>
        <div class="pull-right">
          <pagination :total-item="totalItem" @sizeChange="sizeChange" @pagination="pagination"
                      :per-item="params.pageSize"></pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="本地上传" name="second">

        <div class="fa-product">
          <upload-image class="product-img-upload" ref="uploadImage" :max="1" :formData="{group: 'rotueName'}"
                        @file="getFile">
          </upload-image>
          <p class="product-img-tips">2.本地上传的图片，在订单发布成功后会进入商品图库。</p>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div slot="footer" v-if="activeName2 === 'first'">
      <el-row>
        <el-col :span="24">
          <span style="margin-right: 30px">您已选中：<span class="font-red">{{confirmImg}}</span> 个商品</span>
          <el-button @click="innerVisible = false">取消选择</el-button>
          <el-button type="primary" @click="confirm">确 认</el-button>
        </el-col>
      </el-row>
    </div>
  </el-dialog>
</template>
<script>
import Pagination from '@/components/Pagination'
import {alert, dotData, copy} from '@/utils'
import ImgViewer from '@/views/fhb/temporary/ImgViewer'

export default {
  components: {
    Pagination,
    ImgViewer
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    editPicture: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      innerVisible: false,
      activeName2: 'first',
      totalItem: 0,
      name: '',
      params: {
        pageSize: 10,
        pageNum: 1
      },
      goodsBig: [],
      goodsMid: [],
      confirmArr: []
    }
  },
  created() {
  },
  watch: {
    visible(val, oldVal) {
      if (val === oldVal) {
        return
      }
      this.activeName2 = 'first'
      if (val) {
        this.getGoodsTypes()
      }
      this.innerVisible = val
    },
    innerVisible(val, oldVal) {
      if (val === oldVal) {
        return
      }
      this.$emit('update:visible', val)
    }
  },
  computed: {
    confirmImg() {
      return this.confirmArr.length
    }
  },
  methods: {
    confirm() {
      if (this.confirmArr.length) {
        this.$emit('addcheckShopping', this.confirmArr)
        this.innerVisible = false
      } else {
        alert('没有产品类型可选择！')
      }
    },
    getGoodsTypes() { // 大类商品
      this.$ajax.get('/ms-fahuobao-order/FhbOrder/getGoodNums').then(response => {
        if (!response.success) {
          return
        }
        this.goodsBig = response.data
        let allCode = dotData(this.goodsBig, '[0].code')
        if (this.goodsBig.length < 2 && allCode === 'ALL') {
          this.activeName2 = 'second'
        }
        this.getInClass(response.data[0])
        setTimeout(_ => {
          this.checkMid()
        }, 50)
      })
    },
    getInClass(item) {
      this.params.code = item.code
      this.httpGetTable()
    },
    httpGetTable() { // 中类商品
      this.params.name = this.name
      this.params.state = '1'
      this.$ajax.table('/ms-fahuobao-order/FhbOrder/getDetailPic', this.params).then(response => {
        if (!response.success) {
          return
        }
        let arr = copy(response.data, true)
        this.totalItem = response.totalItem
        arr.forEach(item => {
          if (!Array.isArray(item.picture)) {
            item.picture = item.picture.split(',')
          }
          this.$set(item, 'checkImg', false)
        })
        this.goodsMid = arr
      })
    },
    checkImgFun(data) { // 图片选择
      data.checkImg = !data.checkImg
      let productCodeArr = []
      productCodeArr.push(data.bigClassNo, data.middleClassNo)
      data.productCodeArr = productCodeArr
      this.confirmArr = []
      if (this.editPicture) {
        this.goodsMid.forEach(item => { // 把其他图片改为未选中
          if (item.goodsBaseId !== data.goodsBaseId) { // 判断是否是当前点击图片
            item.checkImg = false
          }
        })
        this.confirmArr.push(data)
      } else { // 添加商品
        this.goodsMid.forEach(item => {
          if (item.checkImg) {
            this.confirmArr.push(item)
          }
        })
      }
    },
    sizeChange(size) {
      this.params.pageSize = size
      this.httpGetTable()
    },
    pagination(page) {
      this.params.pageNum = page
      this.httpGetTable()
    },
    checkMid(event, data) { // 左侧的大类列表交互
      let _list = window.$(this.$el).find('.product-left .product-name-list')
      window.$.each(_list, function(index, item) {
        if (!event && index < 1) { // modal打开默认第一个选中
          window.$(item).addClass('name-list-active')
          return
        }
        window.$(item).removeClass('name-list-active')
      })
      if (event) {
        window.$(event.currentTarget).addClass('name-list-active')
        this.params.code = data.code
        this.httpGetTable()
      }
      this.confirmArr = []
    },
    getFile(val) {
      this.confirmArr = []
      this.confirmArr.push({
        picture: val.fileId.split(','),
        productCodeArr: [],
        pictureName: val.fileName
      })
      this.confirm()
    }
  }
}
</script>
